<template>
  <div class="header_information page-container">
    <!-- 头部 -->
    <el-row class="header_name">
      <el-col :span="24" class="header_text">
        <h1>报名管理</h1>
      </el-col>
      <el-col :span="24">
        <div class="header_line"></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row class="el_row_btn">
      <el-col :span="24" class="content">
        <div class="content_top_btn">
          <div>
            <el-button size="large" type="primary" @click="handleAddEvent">新增赛项</el-button>
            <el-button size="large" type="success" @click="handleChangeIdmanage()">ID码管理</el-button>
          </div>
          <div>
            <el-space>
              <!-- 参赛选择 -->
              <EventSelect v-model="query_data.rootId" />
              <!-- 地区选择 -->
              <ProvinceSelect v-model:economize="query_data.economize" v-model:market="query_data.market" :isW="true"
                :showMarket="false" :addChina="true" />
              <!-- 分组选择 -->
              <GroupsSelect v-model="query_data.groupId" />
              <el-button size="large" :icon="Search" circle :loading="loading" @click="() => { handleLoad(true) }" />
            </el-space>
          </div>

        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <el-row>
      <el-col :span="24" v-loading="loading">
        <div class="col_sp24">
          <el-card class="box_card" v-for="item in fromList" :key="item.eventId">
            <template #header>
              <div class="card_header">
                <span class="card_text">{{ item.name }}</span>
                <el-dropdown>
                  <el-icon style="outline: none;">
                    <MoreFilled />
                  </el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleCommand('test-questions', item)">试题管理</el-dropdown-item>
                      <el-dropdown-item @click="handleCommand('admission-ticket', item)">准考证管理</el-dropdown-item>
                      <el-dropdown-item @click="handleCommand('exam-room', item)">考场管理</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
            <div class="text item">
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Pointer />
                  </el-icon>
                  <span> 比赛组别： </span>
                </div>
                <span class="con_group">{{ item.groupDescribe }}</span>
              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <MagicStick />
                  </el-icon>
                  <span> 比赛类型： </span>
                </div>
                <span class="con_group" v-if="item.competitionType == 0">线下 </span>
                <span class="con_group" v-if="item.competitionType == 1">线上 </span>
                <span class="con_group" v-if="item.competitionType == 2">线上+线下 </span>

              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  <span> 报名时间： </span>
                </div>

                <span class="con_group">{{ item.startTime }}至{{ item.endTime }} </span>

              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  <span> 比赛时间： </span>
                </div>

                <span class="con_group">{{ item.playingTime }}</span>

              </div>
              <div class="competition_content">
                <div class="content">
                  <el-icon>
                    <User />
                  </el-icon>
                  <span> 报名人数：</span>
                </div>

                <span class="con_group">{{ item.enrollment }}</span>
              </div>
            </div>
            <div class="btns">
              <el-button size="large" type="primary" @click="handleChangeOfEvent(item.eventId)">更改赛项</el-button>
              <el-button size="large" type="danger" @click="handleDeletOfEvent(item.eventId)">删除赛项</el-button>

            </div>
          </el-card>

        </div>
        <div class="nodata" v-if="total == 0">
          <el-empty></el-empty>
        </div>
      </el-col>
    </el-row>
    <!-- 弹窗--新增赛项 -->
    <!-- :before-close="handleClose" -->
    <el-dialog v-model="dialogVisible" title="新增赛项" width="40%">
      <el-form :model="addform" size="large" ref="reg_data_ref" :rules="reg_data_rules" :label-width="formLabelWidth">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addform.name" autocomplete="off" placeholder="请输入比赛姓名" />
        </el-form-item>
        <el-form-item label="比赛组别" prop="groupIds">
          <el-checkbox-group v-model="addform.groupIds">
            <el-checkbox v-for="item in addGroups" :key="item.groupId" :label="item.groupId">{{ item.groupDescribe }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="比赛描述" prop="eventDescribe">
          <el-input v-model="addform.eventDescribe" autocomplete="off" placeholder="请输入比赛描述" />
        </el-form-item>
        <el-form-item label="比赛类型" prop="competitionType">
          <el-select v-model="addform.competitionType" placeholder="请选择比赛类型" clearable class="content_select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区" prop="economize">
          <div class="select_region">
            <ProvinceSelect :isW="true" v-model:economize="addform.economize" :showMarket="false" :addChina="true" />
          </div>
        </el-form-item>

        <el-form-item label="报名时间" prop="time">
          <el-date-picker v-model="addform.time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime2" />

        </el-form-item>
        <el-form-item label="比赛时间" prop="playingTime">
          <el-date-picker v-model="addform.playingTime" type="datetime" placeholder="比赛时间" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" />

        </el-form-item>
        <el-form-item label="报名人数" prop="enrollment">
          <el-input v-model="addform.enrollment" placeholder="请输入报名人数"></el-input>
        </el-form-item>
        <el-form-item label="比赛类型" prop="typeId">
          <EventtypeSelect v-model="addform.typeId" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleFalsedialogVisible" :loading="loading">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 弹窗--更改赛项 -->
    <!-- :before-close="handleClose" -->
    <el-dialog v-loading="loading" v-model="dialogUpdateEventVisible" title="更改赛项" width="40%">
      <el-form :model="formupdate" ref="reg_data_ref" :rules="reg_data_rules" :label-width="formLabelWidth">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formupdate.name" autocomplete="off" placeholder="请输入比赛姓名" />
        </el-form-item>
        <el-form-item label="比赛组别" prop="groupId">
          <el-select v-model="formupdate.groupId" placeholder="请修改比赛组别">
            <el-option v-for="item in addGroups" :key="item.groupId" :label="item.groupDescribe" :value="item.groupId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="比赛描述" prop="eventDescribe">
          <el-input v-model="formupdate.eventDescribe" autocomplete="off" placeholder="请输入比赛描述" />
        </el-form-item>
        <el-form-item label="比赛类型" prop="competitionType">
          <el-select v-model="formupdate.competitionType" placeholder="请选择比赛类型" clearable class="content_select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区" prop="economize">
          <div class="select_region">
            <ProvinceSelect :isW="true" v-model:economize="formupdate.economize" :showMarket="false" :addChina="true" />
          </div>
        </el-form-item>

        <el-form-item label="报名时间" prop="endTime">
          <el-date-picker v-model="overtime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime2" />

        </el-form-item>
        <el-form-item label="比赛时间" prop="playingTime">
          <el-date-picker v-model="formupdate.playingTime" type="datetime" placeholder="比赛时间" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" />

        </el-form-item>
        <el-form-item label="报名人数" prop="enrollment">
          <el-input v-model="formupdate.enrollment" placeholder="请输入报名人数"></el-input>
        </el-form-item>
        <el-form-item label="比赛类型" prop="typeId">
          <EventtypeSelect v-model="formupdate.typeId" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogUpdateEventVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpdatadialogVisible" :loading="loading">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next, total" :total="total" @current-change="handlePage" />
    </div>
  </div>
  <TestQuestionsModal />
  <AdmissionTicketModal />
  <ExamRoomModal />
</template>

<script  setup>
import {
  ScaleToOriginal,
  Search,
  MoreFilled
} from "@element-plus/icons-vue";

import { nextTick, onMounted, ref } from "vue";
import { usePage } from "@/hooks/usePage"
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { getEvents, addEvent, updateEvent, getGroups, getEventInfoByEventId, deleteEvent } from '@/api/manage/organcommitmenu/index'
import ProvinceSelect from "@/components/province-select/index.vue"
import EventSelect from "@/components/event-select/index.vue"
import GroupsSelect from "@/components/groups-select/index.vue"
import { useRouter } from "vue-router"
import TestQuestionsModal from "./modal/test-questions-modal.vue"
import AdmissionTicketModal from "./modal/admission-ticket-modal.vue"
import ExamRoomModal from "./modal/exam-room-modal.vue"
import EventtypeSelect from "@/components/eventtype-select/index.vue"


import { open } from "@/utils/modal"
const router = useRouter();
const formLabelWidth = '95px'


// 弹窗--新增赛项
const dialogVisible = ref(false)

const addform = ref({
  name: '', //赛项名
  eventDescribe: "", //赛项描述
  groupIds: [], // 项目分组
  competitionType: null,   // 比赛类型
  economize: null,// 省
  market: null, // 市
  time: [],
  playingTime: "",// 比赛时间
  startTime: "", // 开始时间
  endTime: "",  // 结束时间
  enrollment: "",
  typeId:""
})


const defaultTime2 = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
const options = ref([
  {
    value: 0,
    label: '线下',
  },
  {
    value: 1,
    label: '线上',
  },
  {
    value: 2,
    label: '线上+线下',
  },
])

// 新增赛项
const handleAddEvent = () => {
  dialogVisible.value = true
}

// 新增赛项保存
const handleFalsedialogVisible = async () => {

  reg_data_ref.value.validate(async (v, rule) => {

    if (!v) {
      return;
    }
    addform.value.startTime = addform.value.time[0]
    addform.value.endTime = addform.value.time[1]
    addform.value.groupIds = addform.value.groupIds.join(',')

    let res = await addEvent(addform.value)
    if (res.success) {
      ElNotification({
        title: '成功',
        message: `${res.message}`,
        type: 'success',
      })
    } else {
      ElMessage.error(res.message)
    }
    dialogVisible.value = false
    addform.value = {}
    handleLoad(true);
  })
}

// 存储新增赛项
const addGroups = ref([])
// 获取赛项分组
const handleGetGroups = async () => {
  let res = await getGroups()
  if (res.success) {
    addGroups.value = res.entityList
  }
}

// 更改赛项
const dialogUpdateEventVisible = ref(false)
const formupdate = ref({})
const overtime = ref([])
/**
 * ID码管理
 */
const handleChangeIdmanage = () => {
  router.push({
    name: "manage-id-manage",
  })
}
/**
 * 更改赛项
 */
const handleChangeOfEvent = async (eventId) => {
  // 查询赛项
  let res = await getEventInfoByEventId({ eventId })
  if (res.success) {
    formupdate.value = res.entity
    overtime.value = [formupdate.value.startTime, formupdate.value.endTime]
  }
  nextTick(() => {
    dialogUpdateEventVisible.value = true
  })
}
// 确定更改赛项
const handleUpdatadialogVisible = async () => {
  reg_data_ref.value.validate(async (v, rule) => {
    if (!v) {
      return;
    }
    formupdate.value.startTime = overtime.value[0];
    formupdate.value.endTime = overtime.value[1];
    let res = await updateEvent(formupdate.value)
    if (res.success) {
      ElNotification({
        title: '成功',
        message: `${res.message}`,
        type: 'success',
      })
    } else {
      ElMessage.error(res.message)
    }
    dialogUpdateEventVisible.value = false
    handleLoad(true);
  })
}
// 删除赛项
const handleDeletOfEvent = (eventId) => {
  ElMessageBox.confirm('确定删除该赛项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    let res = await deleteEvent({ eventId })
    console.log(res);
    if (res.success) {
      ElMessage({
        type: 'success',
        message: res.message,
      })
      handleLoad(true);
    } else {
      ElMessage.error(res.message)
      handleLoad(true);
    }
  })

}
const {
  total,
  data: fromList,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: getEvents,
})


// 规则
const reg_data_ref = ref();
const reg_data_rules = ref({
  name: [
    {
      type: 'string',
      required: true,
      message: '请输入名称',
      trigger: 'blur',
    }
  ],
  groupId: [
    {
      required: true,
      message: '请选择组别',
      trigger: 'blur',
    }
  ],
  eventDescribe: [
    {
      type: 'string',
      required: true,
      message: '请输入比赛描述',
      trigger: 'blur',
    }
  ],
  competitionType: [
    {

      required: true,
      message: '请输入比赛类型',
      trigger: 'blur',
    }
  ],
  economize: [
    {

      required: true,
      message: '请选择地区',
      trigger: 'blur',
    }
  ],
  endTime: [
    {
      required: true,
      message: '请选时间',
      trigger: 'blur',
    }
  ],
  playingTime: [
    {
      required: true,
      message: '请选比赛时间',
      trigger: 'blur',
    }
  ],
  enrollment: [
    {
      required: true,
      message: '请选报名人数',
    }
  ],
  // 比赛类型
  competitionType: [
    {
      required: true,
      message: '请选择比赛类型',
    }
  ],
  // 比赛组别
  groupIds: [
    {
      required: true,
      message: '请选择比赛组别',
    }
  ],
  // 比赛时间
  time: [
    {
      required: true,
      message: '请选比赛时间',
    }
  ],


});
/**
 * 指令事件 更多菜单
 */
const handleCommand = (command, item) => {
  open(command + "-modal", item)
}

onMounted(() => {
  handleLoad(true);
  handleGetGroups()
})
</script>

<style lang="scss" scoped>
.header_information {
  padding: 20px;

  .header_name {
    margin-left: 10px;
    margin-right: 10px;

    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }

    h1 {
      font-size: 28px;
    }

    // 线
    .header_line {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0 20px 0;
      background-color: #8473f717;
    }
  }

  //   内容
  :deep(.el-card__header) {
    background: #dcdfe633;
    height: 50px;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px 10px 0 0;
  }

  .col_sp24 {
    flex-wrap: wrap;
    display: flex;

    .box_card {
      width: 450px;
      height: 280px;
      margin-bottom: 20px;
      margin-right: 20px;
      border: 1px solid #ebeef5;
      border-radius: 10px;

      .card_header {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 310px;
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .card_text {
          font-size: 16px;
          font-weight: 700;
          line-height: 0 !important;
        }
      }

      .btns {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }

  .text {
    height: 160px;

    .competition_content {
      display: flex;
      margin-bottom: 10px;

      .content {
        display: flex;
        align-items: center;
        color: #cf9236;

        span {
          font-size: 14px !important;
          margin-left: 3px;
        }
      }

      .con_group {
        color: #909399;
        font-size: 14px !important;
      }
    }
  }

  .signup {
    float: right;
    color: #3e3a39;
    padding: 9px 15px;
    height: 32px;

    &:nth-child(1) {
      margin-left: 10px;
    }

    span {
      font-size: 12px !important;
    }
  }

  .el_row_btn {
    margin-bottom: 20px;

    .content {
      .content_top_btn {
        display: flex;
        justify-content: space-between;

        .top_search_inp {
          width: 150px;
          height: 40px;
          margin-right: 5px;
        }

        .top_search_btn {
          width: 110px;
          margin-right: 5px;
        }

        .top_search_btn1 {
          width: 90px;
          margin-right: 5px;
        }
      }
    }
  }

  // 弹窗
  :deep(.el-dialog__header) {
    span {
      line-height: 24px;
      font-size: 18px;
      color: #303133;
    }
  }

  // 分页
  .pagination {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
  }
}

.nodata {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>